<template>
  <div
    class="clip center"
    :style="style"
    @mousedown.stop.prevent.left="dragStart"
  >
    {{ clip.name }}
    <div
      class="clip-resizer left"
      @mousedown.stop.prevent.left="resizeStart($event, true)"
    ></div>
    <div
      class="clip-resizer right"
      @mousedown.stop.prevent.left="resizeStart($event, false)"
    ></div>
  </div>
</template>
<script lang="ts" setup>
import { useClip } from '@/composables/clip'
import { Clip } from '@/types'
const { clip } = defineProps<{ clip: Clip }>()
const { style, resizeStart, dragStart } = useClip(clip)
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
@import '../../assets/varibles.styl'
.clip
  background $clipBgColor
  position absolute
  height 100%
  cursor default
  &:hover .clip-resizer
    display block
.clip-resizer
  position absolute
  height 100%
  cursor ew-resize
  box-sizing border-box
  display none
  width 7px
  border 2px solid #fff
.left
  left 0
  border-right transparent
.right
  right 0
  border-left transparent
</style>
